{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }

    .xm-body {
        height: 400px !important;
        overflow-y: scroll !important;
    }

    .layui-form-selected dl {
        height: 200px !important;
        overflow-y: scroll !important;
    }

    .layui-tab-brief>.layui-tab-title .layui-this {
        color: #6e56ff;
    }

    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
        border-bottom: 2px solid #6e56ff;
    }
    .avatar{
        width:80px; height:80px; border-radius:50%;
    }

    .image-shade{
        position: relative;
        top:-30%;
        right: -40%;
        width: 100%;
        text-align: center;
        /*display: none;*/
    }
    .title{
        font-weight:bolder;
    }
    .layui-elem-quote {
        margin-bottom: 10px;
        line-height: 1px;
        background-color: white;
        padding: 15px;
        border-left: 5px solid rgb(110, 68, 255);
        border-radius: 0px 2px 2px 0px;
        font-weight: bolder;
        color: black;
    }

    .white-bg {
        background-color: white;
        width: 50%;
    }

</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 20px">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本信息</li>
                    </ul>
                </div>
                <br>
                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md1">
                            <div class="layui-panel">
                                <!--头像-->
                                <div class="avatar edit-avatar">
                                    <img src="{$data.avatar|default='/static/manage/images/default_user_head.png'}" class="avatar">
                                    <div class="image-shade"><i class="layui-icon layui-icon-edit"  style="font-size: 30px; color: #6e56ff;"></i></div>
                                </div>

                            </div>
                        </div>
                        <div class="layui-col-md11">
                            <div class="layui-panel">
                                <table class="layui-table layui-bg-gray" lay-even="" lay-skin="nob">
                                    <colgroup>
                                        <col width="150">
                                        <col width="150">
                                        <col width="150">
                                        <col width="150">
                                    </colgroup>
                                    <tbody>
                                    <tr>
                                        <td class="edit-nickname"><span class="title">昵称：</span>{$data.nickname?$data.nickname:'无'} <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                        <td class="edit-username"><span class="title">用户名：</span>{$data.username?$data.username:'无'} <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                        <td class="edit-mobile"><span class="title">手机号：</span>{$data.mobile?$data.mobile:'无'} <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                        <td ><span class="title">注册时间：</span>{$data.create_time_data?$data.create_time_data:'无'} </td>

                                    </tr>
                                    <tr>
                                        <td class="edit-password"><span class="title">登录密码变更 </span><i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                        <td class="edit-safe_password"><span class="title">支付密码（安全密码）变更 </span> <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                        <td>
                                            <span class="title">身份：</span>
                                            {if condition="$data.parent_id ==0"}
                                            <span class="layui-badge layui-bg-blue">租户</span>
                                            {else /}
                                            <span class="layui-badge">子管理员（来自ID:{$data.top_id} 租户）</span>
                                            {/if}

                                        </td>
                                        <td ><span class="title">最后登录时间：</span>{$data.login_time_data?$data.login_time_data:'无'} <br>（ip:{$data.login_ip?$data.login_ip:'无'}）</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>

                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <input type="hidden" id="id" name="id" value="{$data.id? $data.id : 0}"/>
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        {if condition="$data.parent_id ==0"}
                        <li class="layui-this">账户明细</li>
                        <li>角色分配</li>
                        <li>账号禁用</li>
                        {else /}
                        <li class="layui-this">角色分配</li>
                        <li>账号禁用</li>
                        {/if}

                    </ul>
                    <div class="layui-tab-content" style="height: 100px;">
                        {if condition="$data.parent_id ==0"}
                        <div class="layui-tab-item layui-show">

                            <table class="layui-table white-bg" lay-even="" lay-skin="nob">
                                <colgroup>
                                    <col width="150">
                                    <col width="150">
                                </colgroup>
                                <tbody>
                                <tr >
                                    <td class="edit-money"><span class="title">可用余额：</span>{$data.wallet.money?$data.wallet.money:'0'}元 <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                    <td class="edit-money"><span class="title">冻结余额：</span>{$data.wallet.freeze_money?$data.wallet.freeze_money:'0'}元 <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                </tr>
                                </tbody>
                            </table>
                            <iframe name='walletBill' id='walletBill' src='/manage/admin/member/walletBill/index.html?member_id={$data.id? $data.id : 0}' frameborder='0' align='left' width='100%' class='pull-left' height='700'><p>你的浏览器不支持iframe标签</p></iframe>

                        </div>
                        {/if}
                        {if condition="$data.parent_id ==0"}
                        <div class="layui-tab-item">
                        {else /}
                         <div class="layui-tab-item layui-show">
                        {/if}
                            <!--分类id-->
                            <blockquote class="layui-elem-quote">
                                租户 角色 权限
                            </blockquote>
                            <table class="layui-table white-bg" lay-even="" lay-skin="nob">
                                <colgroup>
                                    <col width="250">
                                    <col width="250">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td class="edit-rule_ids"><span class="title">*更改当前租户角色 </span><i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                </tr>
                                </tbody>
                            </table>
                            <blockquote class="layui-elem-quote">
                                管理 租户-平台 权限
                            </blockquote>
                            <iframe name='memberRole' id='memberRole' src='/manage/Role/memberRole?return_type=old_json&member_id={$data.id? $data.id : 0}' frameborder='0' align='left' width='100%' class='pull-left' height='700'><p>你的浏览器不支持iframe标签</p></iframe>

                        </div>
                        <div class="layui-tab-item">

                            <blockquote class="layui-elem-quote">
                                账号禁用
                            </blockquote>
                            <table class="layui-table white-bg" lay-even="" lay-skin="nob">
                                <colgroup>
                                    <col width="250">
                                    <col width="250">
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td class="edit-status"><span class="title">账号状态：</span>{$data.status==0?'封禁中':'正常'} <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                    <td class="edit-lock_config"><span class="title">配置权限：</span>{$data.lock_config==0?'正常':'关闭'} <i class="layui-icon layui-icon-edit"  style="font-size: 18px; color: #6e56ff;"></i></td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>



                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <!--<button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>-->
                        </div>
                    </div>
              </form>
                <br><br>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate, manage, xmSelect, eleTree ,bwimage ,laytpl;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate', 'manage', 'xmSelect', 'eleTree','laytpl','bwimage'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;
        manage = layui.manage;
        xmSelect = layui.xmSelect;
        eleTree = layui.eleTree;
        bwimage = layui.bwimage;
        laytpl = layui.laytpl;
        //添加时间 日期时间选择器
        laydate.render({
            elem: '#add_time'
            , type: 'datetime'
        });


        // var uploadInst = bw_upload(upload, 'pic');//图标上传
        member.init();
        bwimage.upload();
        bwimage.init.callback = function(elem,url){
            member.upload_callback(elem,url);
        };
//权限下拉多选---------------------------------------------------  start


        bwajax.post("{:Url('manage/Role/getRoleMemberTree?return_type=old_json')}", {
            checked_ids: '{$data.rules? $data.rules : 0}'
            , disabled: '0'
            , member_id: '{$data.id? $data.id : 0}',
            is_child: 'true'
        }).then(function (response) {
            console.log(response.data);
            //先渲染多选
            var auth = xmSelect.render({
                el: '#auth',
                theme: {
                    color: '#5FB878',
                },
                content: '<div id="ele2" lay-filter="ele2"></div>',
            })


//渲染自定义内容
            var ele = layui.eleTree.render({
                elem: '#ele2',
                data: response.data,
                showCheckbox: true,
                defaultExpandAll: false,
                checkStrictly: true, //严格按照父子不关联
                renderAfterExpand: false //未展开也渲染子节点数据
            });


//初始化数据---------------------------------------------end


            //初始化选中数据需要后台的树菜单传入checked : true属性
            var arr = ele.getChecked(false, false);
            var value = new Array();
            for (i = 0; i < arr.length; i++) {
                value.push(arr[i].id);
            }
            auth.update({
                prop: {
                    name: 'label',
                    value: 'id',
                },
                initValue: value,
                data: arr,
            }).setValue(arr)
            $('#auth_id').val(value.toString());

            //初始化数据---------------------------------------------end

//监听下拉多选的选择
            auth.update({
                on({arr, change, isAdd}) {
                    if (isAdd === false) {
                        //监听取消
                        ele.setChecked(arr.map(item => item.id), true);
                        var value = new Array();
                        for (i = 0; i < arr.length; i++) {
                            value.push(arr[i].id);
                        }
                        $('#auth_id').val(value.toString());
                    }
                },
            });
//监听树的选择
            layui.eleTree.on("nodeChecked(ele2)", function (d) {
                var arr = ele.getChecked(false, false)
                console.log(arr)
                var value = new Array();
                for (i = 0; i < arr.length; i++) {
                    value.push(arr[i].id);
                }
                $('#auth_id').val(value.toString());
                auth.update({
                    prop: {
                        name: 'label',
                        value: 'id',
                    },
                    data: arr,
                }).setValue(arr)

            })

        });


//权限下拉多选---------------------------------------------------  end

        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;
            var id = $('#id').val();
            if(parseInt(id)){
                if (!data.rule_ids) {
                    layer.msg('请选择角色', {icon: 2});
                    return false
                }
            }

            // if (!data.username) {
            //     layer.msg('用户名不能为空', {icon: 2});
            //     return false
            // }
            if (!data.nickname) {
                layer.msg('昵称不能为空', {icon: 2});
                return false
            }
            if (!data.mobile) {
                layer.msg('手机号不能为空', {icon: 2});
                return false
            }

            delete data['eleTree-node'];
            delete data.select;
            var post_url = "/manage/admin/member/add";
            if (data['id'] != 0) {
                post_url = "/manage/admin/member/edit";

            }
            //console.log(data);return false;
            //ajax调用后台接口
            bwajax.post(post_url, data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();

                    } else {
                        layer.msg(response.data.msg, {icon: 2});

                    }
                })

            return false;
        })
    });


    function reload(page) {
        window.location.reload();
    }


    function submitSuccess() {
        parent.location.reload();//这里调用的是父页面的reload方法
        setTimeout(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }, 1000);
    }

    // //粉丝
    // function getNum(){
    //
    //     layer.open({
    //         type: 2,
    //         title: '图标列表',
    //         shade: 0.8,
    //         //closeBtn: 0, //不显示关闭按钮
    //         shade: [0],
    //         shadeClose: true,//单机空白处消失
    //         maxmin: true,
    //         //anim: 4, //动画类型
    //         area: ['40%','90%'],
    //         content:"{:Url('public_common/icon')}",
    //         btn: ['选择图标'],
    //         yes: function(index, layero){
    //
    //             var nodeName = window["layui-layer-iframe" + index];//父页面引用
    //             var icon = nodeName.getIcon();
    //             if(icon!=false){
    //                 $('#icon').val(icon);
    //                 layer.close(index);
    //                 //处理重复提交
    //             }
    //
    //
    //
    //
    //
    //         }
    //     });
    // }


    var member = {
        init:function () {
           this.listen();
        },
        listen:function () {
            //监听图片体校更改
            $('body').on('click','.edit-avatar',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=avatar", '编辑');
            });
            $('body').on('click','.edit-nickname',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=nickname", '编辑');
            });
            $('body').on('click','.edit-username',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=username", '编辑');
            });
            $('body').on('click','.edit-mobile',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=mobile", '编辑');
            });
            $('body').on('click','.edit-password',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=password", '编辑');
            });
            $('body').on('click','.edit-safe_password',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=safe_password", '编辑');
            });
            $('body').on('click','.edit-rule_ids',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=rule_ids", '编辑');
            });
            $('body').on('click','.edit-status',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=status", '编辑');
            });
            $('body').on('click','.edit-lock_config',function(){
                bwOpenIframe("/manage/admin/member/edit?id={$data.id? $data.id : 0}&field=lock_config", '编辑');
            });
            $('body').on('click','.edit-money',function(){
                bwOpenIframe("/manage/admin/member/wallet/edit.html?id={$data.wallet.id? $data.wallet.id : 0}", '编辑');
            });


        }
    }
</script>
{/block}